<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Api Test v3</title>
  
  <link rel="stylesheet" href="./lib/styles/iview.css">
  <!-- <link rel="stylesheet" href="./lib/styles/dragula-3.7.2.css"> -->
  <link rel="stylesheet" href="./styles/main.css">
  
  <!-- <script src="//mstatic.secooimg.com/activity2018/js/sdk/weixin.sdk1.3.2.js"></script> -->
  <script src="./lib/js/vue-2.6.10.js"></script>
  <script src="./lib/js/iview-4.0.2.min.js"></script>
  <script src="./lib/js/vue-json-pretty.js"></script>
  <script src="./lib/js/es6-promise.js"></script>
  <script src="./lib/js/Sortable.min.js"></script>
  <script src="./lib/js/vuedraggable.umd.min.js"></script>

  <script src="https://cdn.ronghub.com/RongIMLib-3.0.6-dev.js"></script>
  <script src="./config.js"></script>
  <script src="./js/common/utils.js"></script>
  <script src="./js/common/service.js"></script>
  <script src="./js/common/api-list.js"></script>

  <script id="rong-global-config" type="text/x-template">
    <div class="rong-login">
      <i-form :label-width="80" class="rong-input-form">
        <FormItem class="rong-login-formitem" v-for="item in configList" v-bind:key="item.name" :label="item.name">
          <i-input class="rong-login-input-item" :class="'rong-input-' + item.name" v-if="item.type === 'string'" v-model="config[item.name]" type="text" :placeholder="prompt[item.name] || item.name" />
          <i-switch v-else-if="item.type === 'boolean'" v-model="config[item.name]" />
          <span class="rong-prompt" v-if="prompt[item.name]">{{prompt[item.name]}}</span>
        </FormItem>
        <div class="rong-connect-btn-box">
          <i-button @click="login(config)" type="primary">开始链接</i-button>
          <i-button @click="clearStorage()" type="warning">清空缓存</i-button>
        </div>
      </i-form>
    </div>
  </script>

  <script id="rong-tpl-apibtn" type="text/x-template">
    <div class="rong-api-btn" :value="apiValue">
      <Tooltip placement="bottom" :transfer="true" :disabled="isdragging">
        <i-button class="rong-api-btn-box" size="small" @click="run()">
          <span class="rong-api-btn-name">{{selfApi.name}}</span>
          <!-- <div class="rong-api-btn-set">
            <button class="rong-api-btn-run" @click="run()">运行</button
            ><button class="rong-api-btn-config" @click="showEditDialog()">设置</button
            >
          </div> -->
        </i-button>
        <div slot="content" class="rong-prompt-box">
            <i-button v-if="hasParams" size="small" type="info" @click="showEditDialog()">修改配置</i-button>
            <i-button size="small" type="success" @click="openUrl(selfApi.doc)">查看文档</i-button>
            <!-- <p><a class="rong-api-btn-link" :href="selfApi.doc" target="_blank">点击查看文档</a></p>
            <p><a class="rong-api-btn-link" :href="selfApi.doc" target="_blank">点击配置参数</a></p> -->
            <p>方法: {{selfApi.eventName}}</p>
            <p>描述: {{selfApi.desc}}</p>
            <p v-if="hasParams">参数:</p>
            <ul class="rong-tip-params">
              <li v-for="param in selfApi.params" v-bind:key="param.name">
                {{param.name}} ({{param.type}})
              </li>
            </ul>
        </div>
      </Tooltip>

      <Modal v-model="isShowEditDialog" draggable scrollable title="参数设置" width="395">
        <i-form :label-width="90">
          <FormItem v-for="param in paramList" v-bind:key="param.name" :label="param.name" class="rong-api-set-item">
            <i-input v-if="param.type === 'string'" v-model="param.value" type="text" :placeholder="param.name" />
            <i-input v-else-if="param.type === 'number'" v-model="param.value" type="number" :placeholder="param.name" />
            <i-switch v-else-if="param.type === 'boolean'" v-model="param.value" @on-change="change" />
          </FormItem>
        </i-form>
        <div slot="footer">
            <i-button type="success" @click="run()">运行</i-button>
            <i-button type="primary" @click="hideEditDialog()">确定</i-button>
        </div>
      </Modal>

    </div>
  </script>

  <script id="rong-json-alert" type="text/x-template">
    <Modal class="rong-json-alert" v-model="isShow">
      <prettyjson class="rong-json-content" :showLength="true" :highlight-mouseover-node="true" selectable-type="single" :path="'res'" :data="data">
      </prettyjson>
      <div slot="footer">
          <i-button type="primary" @click="hide()">确定</i-button>
      </div>
    </Modal>
  </script>

  <script src="./js/components/button.js"></script>
  <script src="./js/components/json-alert.js"></script>
  <script src="./js/login.js"></script>
</head>
<body>
  <div id="app" class="rong-box rong-hidden" :class="{ 'rong-drag': isDragging, 'rong-show': 1  }">

    <h1>
      Web SDK Demo
      <a target="_blank" href="https://github.com/rongcloud/websdk-demo/blob/master/api-test.html" title="点击查看源码" class="get-source">示例源码</a>
    </h1>

    <template v-if="isLogged">
      <div class="rong-run-info" v-if="isDebug">
        <p>成功次数: <b>{{runInfo.runCount}}</b></p>
        <p>成功 Api 个数: <b>{{runInfo.successApiCount}}</b></p>
        <p>失败 Api 个数: <b>{{runInfo.failApiList.length}}</b></p>
      </div>

      <!-- <div class="rong-global-opt">
        <i-button class="rong-runall-btn" size="small" @click="runAllApi()">运行全部</i-button>
      </div> -->

      <div class="rong-user-title">
        <h4>当前用户 id： {{currentUserId}}</h4>
        <i-button class="rong-runall-btn" size="small" @click="isShowRunType=true">运行全部</i-button>
        <components class="rong-changeuser-btn" is="apiBtn"
          :api="changeUserApi" :isdragging="isDragging"></components>
        <i-button v-if="isDebug" class="rong-runall-btn" size="small" type="error" @click="isAlarmMuted=!isAlarmMuted">{{ isAlarmMuted ? '取消静音' : '点击静音' }}</i-button>
      </div>

      <p class="rong-api-prompt">
        <b>注:</b>
        <span>以下 Api 按钮可拖拽移动顺序, 点击运行全部按钮, 按当前展示顺序运行 Api</span>
      </p>

      <div class="rong-opt-list">
          <div v-for="(readyList, index) in readyApiQueue" v-bind:key="readyList.id" class="rong-ready-box">
            <draggable :list="readyList" group="people" @start="startDragging()" @end="isDragging=false">
                <!-- <span>{{index + 1}}</span> -->
                <components :ref="'readyApi' + index" v-for="api in readyList" v-bind:key="api.name" class="rong-ready-btn" is="apiBtn" :api="api" :isdragging="isDragging"></components>
            </draggable>
          </div>
      </div>

      <div class="rong-current-output" v-if="currentOutput">
        <p><b>{{currentOutput.title}}</b></p>
        <p><b>耗时:</b> {{currentOutput.consumedTime}} ms</p>
        <p><b>参数:</b> {{toJSON(currentOutput.params)}}</p>
        <template v-if="currentOutput.result">
          <p><b>返回值:</b></p>
          <prettyjson :showLength="true" :highlight-mouseover-node="true" selectable-type="single" :path="'res'"
            :data="currentOutput.result"></prettyjson>
        </template>
      </div>
      
      <!-- <div class="rong-api-list">
        <components class="rong-api-source" v-for="api in apiList" v-bind:key="api.name" is="apiBtn" :api="api"></components>
      </div> -->
      
      <div class="rong-out-list">
        <div class="rong-out-list-head">
          <h4>调用结果如下:</h4>
          <div class="rong-out-btn-list">
            <i-button size="small" @click="clearOutput()">清空</i-button>
            <i-button size="small" @click="showAllOutput()">显示全部</i-button>
            <i-button class="rong-out-list-display" size="small" @click="isShowOutList=!isShowOutList">{{ isShowOutList ? '隐藏' : '展开' }}</i-button>
          </div>
        </div>
        <Collapse class="rong-out-list-content" v-if="displayedOutputList.length" v-show="isShowOutList">
          <Panel v-for="(output, index) in reverse(displayedOutputList)" class="rong-out-panel" v-bind:key="output.id" :name="index + ''" :style="{ color: output.config.color }">
            <span :title="output.title" class="rong-out-title">{{displayedOutputList.length - index}}. {{output.title}}</span>
            <div slot="content" class="rong-out-item">
              <p><b>时间:</b> {{output.time}}</p>
              <p v-if="output.consumedTime"><b>耗时:</b> {{output.consumedTime}} ms</p>
              <p v-if="output.params && output.params.length"><b>参数:</b> {{toJSON(output.params)}}</p>
              <p v-if="output.result"><b>返回值:</b> {{toJSON(output.result)}}</p>
              <i-button v-if="output.result" class="rong-parse-json-btn" size="small" type="primary" @click="showJSONAlert(output.result)">点击解析返回值
              </i-button>
            </div>
          </Panel>
        </Collapse>
      </div>

    </template>

    <components v-else is="login" :login="login" :config="globalConfig"></components>

    <Modal v-model="isShowRunType" draggable scrollable title="运行方式" width="395">
      <i-form :label-width="90">
          <i-select v-model="runType">
            <i-option v-for="opt, key in RunType" v-bind:key="key" :value="key">{{opt.name}}</i-option>
          </i-select>
          <p class="rong-run-sel-prompt">
            <b>提示:</b>
            <span>{{RunType[runType].prompt}}</span>
          </p>
      </i-form>
      <div slot="footer">
        <i-button type="success" @click="runAllApi();isShowRunType=false;">运行</i-button>
      </div>
    </Modal>

    <audio ref="alarm" style="opacity: 0; position: absolute;" src="./styles/alarm.mp3"></audio>

  </div>
</body>

<script src="./js/main.js"></script>

</html>